<template>
    <view class="container">
        <view class="fix-head">
            <view class="fist-part" :style="'background-color:' + themeJson.color">
                <view class="w">
                    <view class="inpBox">
                        <input type="text" confirm-type="search" :placeholder="holder" maxlength="30" v-model="keyword" @confirm="goSearch" />

                        <view class="right-box">
                            <view class="search-btn" @click="goSearch">
                                <text class="iconfont icon-sousuo"></text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 条件选项 -->
            <view>
                <Condition ref="Condition" :cate45Arr="cate45Arr" @selectFinish="selectFinish" :themeJson="themeJson" />
            </view>
        </view>
        <view class="empt"></view>

        <!-- 列表   -->
        <view class="">
            <div class="goodsBox">
                <ProductShow :productArr="listData" :pageNum='requireParams.pageNum'></ProductShow>
            </div>
        </view>
        <view class="nodata-box" v-if="total === 0">
            <view class="img"></view>
            <text class="mt5">Sorry,未找到相关商品！</text>
        </view>
        <!-- <view class="all" v-if="total > 0">
            <text>{{ total }}条</text>
        </view> -->

        <LoadMask v-if="loading" :showMask="false" />
        <ToTop :show="topShow"/>

        <uniLoadMore v-if='total>0' :status='status'/>

    </view>
</template>

<script>

    import Condition from './Condition';
    import { GoodsListFront } from '@/api/http';
    import ProductShow from '@/components/ProductShow';
    import ToTop from '@/components/ToTop';
    import uniLoadMore from '@/components/uni-load-more/uni-load-more';
    const app = getApp();

    export default {
        data() {
            return {
                status:'loading', //more/loading/noMore
                topShow:false,
                loading: true,
                keyword: '',
                holder:'搜索的产品名称',
                //数据
                total: undefined,
                listData: [],
                requireParams: {
                    pageNum: 1,
                    pageSize: 18,
                    goodsName: ''
                },
                themeJson: {
                    color: '#ffd1d1'
                }
            };
        },
        components: { Condition ,ProductShow,ToTop ,uniLoadMore },
        computed: {},
        onShow() {},
        onPageScroll( e ){
            // console.log('滚到',this.imgUrls)
        
            this.topShow = e.scrollTop >100
            
        },
        onReachBottom(e) {
            let page = this.requireParams.pageNum;
            if (page * this.requireParams.pageSize < this.total) {
                this.requireParams.pageNum = page - 0 + 1;

                this.initData();
            }
            else{
                this.status = 'noMore';
            }

        
        },
        onLoad(option) {
            // 监听页面加载的生命周期函数

            this.keyword = decodeURIComponent(option.keys || '');

            this.requireParams.goodsName = this.keyword;

            this.initData();
        },
        methods: {
            /** 搜索按钮操作 */
            handleQuery() {
                this.requireParams.pageNum = 1;
                this.initData();
            },
            initData() {

                this.status = 'loading';

                GoodsListFront(this.requireParams)
                    .then(response => {
                        this.loading = false;
                        if (response.code == 200) {
                            let listData = response.data.map(item => {
                                item.listPictureSrc = this.$getImg(item.listPicture);

                                item.tagsArr = (item.remark || '').split(/,|，|;/g);
                                item.labelArr = (item.productLabelTypeName || '').split(/,|，|;/g).filter(i => i);

                                return item;
                            });

                            this.total = response.total;

                            if (this.requireParams.pageNum == 1) {
                                this.listData = listData;
                            } else {
                                this.listData = this.listData.concat(listData);
                            }
                        } else {
                            this.listData = [];
                            this.total = 0;
                        }

                        // cb && cb()
                    })
                    .catch(() => {
                        this.loading = false;
                        this.listData = [];
                        this.total = 0;
                    });
            },
            goSearch() {
                var keys = this.keyword.replace(/ /g, '');
                this.keyword = keys;

                // if (!keys) {
                //     uni.showToast({
                //         title: '关键字不能为空',
                //         icon: 'none',
                //         duration: 1000
                //     });
                //     return;
                // }

                if (/[`~!@#$%^&*_\-+=<>?:"\/'\\[\]·~！@#￥%……&*——\-+=？：.]/im.test(keys)) {
                    uni.showToast({
                        title: '关键字不能包含特殊字符',
                        icon: 'none',
                        duration: 2000
                    });
                    return false;
                }

                this.requireParams.goodsName = keys;

                this.handleQuery()
            },
            onShareAppMessage() {}
        }
    };
</script>

<style scoped lang="scss">
    /**
 * @file index.css
 * @author Jun
 */

    .fix-head {
        // height: 96px;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 10;
    }
    .empt {
        height: 96px;
    }
    .fist-part {
        height: 52px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .inpBox {
        /* padding: 20rpx auto 0; */
        box-sizing: border-box;
        width: 680rpx;
        height: 74rpx;
        background: #fff;
        border-radius: 80rpx;
        overflow: hidden;
        display: flex;
        align-items: center;
        line-height: 74rpx;
        padding-left: 30rpx;
    }
    .inpBox image {
        margin: 0rpx 18rpx 0;
        width: 36rpx;
    }
    .inpBox input {
        flex: 1;
        /* width: 480rpx; */
        height: 74rpx;
        font-size: 28rpx;
        border: none;
        outline: none;
        background: none;
        transition: all 0.4s;
    }
    /* .inpBox.focusKey input{
  width: 480rpx;
} */
    .inpBox.focusKey button {
        opacity: 1;
    }
    .inpBox button {
        float: right;
        width: 120rpx !important;
        height: 84rpx;
        line-height: 84rpx;
        transition: all 1s;
        font-size: 28rpx;
        opacity: 0;
        padding: 0;
        text-align: center;
        background-color: #272639;
    }

    /* 下拉 */
    .inpBox .typeBox {
        position: relative;
        border-radius: 60rpx;
        font-size: 22rpx;
        width: 160rpx;
        box-sizing: border-box;
        /* background-color: #eaeeae; */
        height: 100%;
        padding: 0 50rpx 0 20rpx;
        margin-right: 20rpx;
    }

    .inpBox .typeBox .iconfont {
        position: absolute;
        right: 20rpx;
        top: 50%;
        font-size: 24rpx;
        transform: translateY(-50%);
        color: #565656;
    }
    .inpBox .typeBox::after {
        position: absolute;
        content: ' ';
        right: 0;
        top: 50%;
        margin-top: -14rpx;
        height: 28rpx;
        width: 2rpx;
        background-color: #eaeaea;
    }

    .right-box {
        display: flex;
        width: 80rpx;
        align-items: center;
        line-height: 1;
    }
    .right-box .cate {
        display: inline-block;
        /* margin-right: 20rpx; */
        padding: 20rpx 14rpx 20rpx;
    }
    .right-box .search-btn {
        display: inline-block;
        padding: 20rpx 20rpx 20rpx 10rpx;
    }
    .right-box .search-btn .iconfont {
        font-size: 50rpx;
        color: #000;
    }

    .all {
        position: fixed;
        z-index: 2;
        bottom: 80rpx;
        left: 50%;
        transform: translateX(-50%);
        padding: 8px 12px;
        line-height: 1.2;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        text-align: center;
        // font-weight: bold;
        font-size: 26rpx;
        border-radius: 14px;
    }

    .goodsBox {
    padding: 10rpx 30rpx 40rpx;
}
</style>
